.app-container {
    max-width: 640px;
    min-width: 320px;
    width: 100%;
    min-height: 100vh;
    margin: 0 auto;
    background-color: rgb(183, 41, 31);

    .marquee-text {
        color: #ff0000;
        font-size: 16px;
        padding: 0.24rem;
        background-color: rgb(183, 41, 31);
        color: rgba(255, 255, 255, 0.4);

        >span {
            height: 1.25rem;
            line-height: 1.25rem;
            font-size: 1.12rem;
        }
    }

    .box {
        width: 100%;
        max-width: 640px;
        margin-top: 0px;
        min-height: 0px;
        height: 55vh;
        overflow: hidden;
        position: relative;
        left: 50%;
        transform: translate(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        min-height: 2.66667rem;
        min-height: 2.66667rem;

        .back {
            position: relative;
            width: 100%;
            top: 0px;
            left: 0px;
            z-index: 1;
            overflow: hidden;

            .image {
                width: 100%;
                display: block;
            }
        }

        .animation_1 {
            animation: animation_1-1 3s linear infinite;

            @keyframes animation_1-1 {
                0% {
                    -webkit-transform: translateY(0) scale(1, 1);
                    transform: translateY(0) scale(1);
                    -moz-transform: translateY(0) scale(1, 1);
                    -ms-transform: translateY(0) scale(1, 1);
                    -o-transform: translateY(0) scale(1, 1);
                }

                50% {
                    -webkit-transform: translateY(0) scale(.85, .85);
                    transform: translateY(0) scale(.85);
                    -moz-transform: translateY(0) scale(.85, .85);
                    -ms-transform: translateY(0) scale(.85, .85);
                    -o-transform: translateY(0) scale(.85, .85);
                }

                100% {
                    -webkit-transform: translateY(0) scale(1, 1);
                    transform: translateY(0) scale(1);
                    -moz-transform: translateY(0) scale(1, 1);
                    -ms-transform: translateY(0) scale(1, 1);
                    -o-transform: translateY(0) scale(1, 1);
                }
            }
        }

        .animation_2{
            animation: animation_2-1 20s linear infinite;

            @keyframes animation_2-1 {
                0% {
                    -webkit-transform: rotate(0deg);
                    transform: rotate(0);
                    -moz-transform: rotate(0deg);
                    -ms-transform: rotate(0deg);
                    -o-transform: rotate(0deg)
                }
                to {
                    -webkit-transform: rotate(360deg);
                    transform: rotate(360deg);
                    -moz-transform: rotate(360deg);
                    -ms-transform: rotate(360deg);
                    -o-transform: rotate(360deg)
                }
            }
        }

        .animation_3{
            
        }
    }


}


@media (min-width:768px) {

    .app-container {
        max-width: 640px;
        min-width: 320px;
        width: 100%;
        min-height: 100vh;
        margin: 0 auto;
        background-color: rgb(183, 41, 31);

        .marquee-text {
            color: #ff0000;
            font-size: 16px;
            padding: 0.24rem;
            background-color: rgb(183, 41, 31);
            color: rgba(255, 255, 255, 0.4);

            >span {
                height: 1.25rem;
                line-height: 1.25rem;
                font-size: 1.12rem;
            }
        }

        .box {
            width: 100%;
            max-width: 640px;
            margin-top: 0px;
            min-height: 0px;
            height: 100vh;
            overflow: hidden;
            position: relative;
            left: 50%;
            transform: translate(-50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: 2.66667rem;
            min-height: 2.66667rem;

            .back {
                position: relative;
                width: 100%;
                top: 0px;
                left: 0px;
                z-index: 1;
                overflow: hidden;

                .image {
                    width: 100%;
                    display: block;
                }
            }
        }


    }

}